<template>
  <div>
    <div>
      <table border="1" cellpadding="0" cellspacing="0">
        <tr bgcolor="#ffc0cb">
          <th class="navId">ID</th>
          <th class="navCategory">背景类别</th>
          <th class="navImg">背景图片</th>
          <th class="navButton">操作</th>
        </tr>
        <tr>
          <td class="navId"></td>
          <td class="navCategory">
            <select v-model="category" class="upData">
              <option>zr</option>
              <option>jz</option>
              <option>dw</option>
              <option>lx</option>
              <option>ms</option>
              <option>dm</option>
              <option>js</option>
              <option>yd</option>
              <option>jt</option>
            </select>
          </td>
          <td class="navImg">
              <form @submit.prevent="uploadFile">
                <input type="file" ref="fileInput" accept="image/*">
                <button type="submit">上传图片</button>
              </form>
          </td>
          <td class="navButton">
            <input type="button" value=" 添加 " @click="update">
          </td>
        </tr>
        <tr v-for="(index,key) in datas" :key="key">
          <td class="navId">{{index.id}}</td>
          <td class="navCategory">{{index.category}}</td>
          <td class="navImg">
            <img :src="index.background_image" height="100px">
          </td>
          <td class="navButton">
            <input type="button" @click="deldate(index.id)" value=" 删除 ">
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import {ApiConfig} from "@/config/AxiosApi";

export default {
  name: "AddNav",
  created() {
    if (!Cookies.get("token") || Cookies.get("grade")==="1") {
      alert("你没有操作权限！")
      this.$router.push("/login")
    }
    this.$axios.get(ApiConfig["getbackground"],{
      params: {
        category: "all",
        ishome: "F"
      }
    })
        .then(res=>{
          this.datas = res["data"]
        })
        .catch(err=>{
          console.log(err)
        })
  },
  data(){
    return{
      datas: {},
      bgImg:"",
      category:""
    }
  },
  methods:{
    update(){
      if (this.bgImg === "" || this.category === ""){
        alert("请输入完整的信息")
        return
      }
      this.$axios.post(ApiConfig["addbackground"],
          {
            "userid": Cookies.get("user"),
            "token": Cookies.get("token"),
            "img": this.bgImg,
            "category": this.category
          })
          .then(res=>{
            alert(res["data"]["msg"])
            this.category = ""
            this.navImg = ""
            this.refresh()
          })
          .catch(err=>{
            console.log(err)
          })

    },
    deldate(backgroundId){
      this.$axios.post(ApiConfig["delbackground"],
          {
            "navid": backgroundId,
            "token": Cookies.get("token"),
            "userid": Cookies.get("user")
          })
          .then(res=>{
            alert(res["data"])
            this.refresh()
          })
          .catch(err=>{
            console.log(err)
          })
    },
    refresh(){
      this.$axios.get(ApiConfig["getbackground"],{
        params: {
          category: "all",
          ishome: "F"
        }
      })
          .then(res=>{
            this.datas = res["data"]
          })
          .catch(err=>{
            console.log(err)
          })
    },
    uploadFile() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);
      this.$axios.post(ApiConfig["upbackground"], formData)
          .then(response => {
            this.bgImg = response.data
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
}
</script>

<style scoped>
table{
  margin: 100px auto;
  color: white;
  text-align: center;
}
table > tr > td{
  padding: 16px;
}
.navId{
  width: 10px;
}
.navImg{
  width: 360px;
}
.navButton{
  width: 50px;
}
.upData{
  height: 30px;
  font-size: 14px;
}
</style>